<template>
  <div id="helpAllBllack">
    <!-- pc端 -->
    <div class="user_profile_pc">
      <div class="help">
        <!-- 弹出框 -->
        <div v-show="onloadIsShowBloc">
          <div
            @click="continueReading"
            class="van-overlay"
            style="z-index: 2001"
          ></div>
          <div class="van-popup van-popup--center" style="z-index: 2002">
            <div class="dialog">
              <button
                @click="backHome"
                class="dialog-btn"
                style="background-color: orange; margin-right: 10px"
              >
                {{ $t("profile.backHome") }}
              </button>
              <button @click="continueReading" class="dialog-btn">
                {{ $t("profile.continue") }}
              </button>
            </div>
          </div>
        </div>

        <!-- 回到顶部 -->
        <a href="javascript:;"
          ><div @click="btnHome" v-show="!timeIiShow" class="after-Home">
            {{ $t("profile.backHome") }}
          </div></a
        >

        <header class="help_pc_header">
          <span class="help_pc_title">{{ $t("profile.Guide") }}</span>
          <img
            src="/common/static/index/img2/bookMark.74a079b2.png"
            class="help_pc_icon1"
          />
          <svg
            t="1590464394806"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="4373"
            width="10"
            height="10"
            class="icon"
            style="margin: 0px 10px"
          >
            <path
              d="M511.994929 64.908336a447.259005 447.259005 0 0 1 174.015193 859.071974A447.259005 447.259005 0 0 1 337.989878 100.01969 444.216427 444.216427 0 0 1 511.994929 64.908336m0-64.908336C229.207563 0 0 229.207563 0 511.994929s229.207563 512.005071 511.994929 512.005071 512.005071-229.207563 512.005071-512.005071S794.772153 0 511.994929 0z"
              fill="#a5a5a5"
              p-id="4374"
            ></path>
            <path
              d="M221.952028 496.293197l45.897293-45.896279 211.665071 211.664056-45.897293 45.897294z"
              fill="#a5a5a5"
              p-id="4375"
            ></path>
            <path
              d="M390.60417 662.740484l370.59009-370.591104 45.897293 45.897293-370.591104 370.591104z"
              fill="#a5a5a5"
              p-id="4376"
            ></path>
          </svg>
          <span class="help_pc_timeTxt">{{ $t("profile.October") }}</span>
          <span class="help_pc_countdownTxt" v-show="timeIiShow">
            {{ $t("profile.Countdown") }}:
            <span style="color: red">{{ timeNumTen }}</span></span
          >
        </header>

        <main class="help_pc_mainContent">
          <div class="help_pc_mainContent-rightBox">
            <div class="help_pc_rightTitle">
              {{ $t("help.help99") }}
              <img src="" class="help_pc_closeIcon" />
            </div>
            <div class="help_pc_rightWrap">
              <div class="help_pc_mustBox">
                <!-- <p  @click="scrollChange('help01')" class="help_pc_mustBox-title" > {{$t('help.help100')}}</p>
                    <p  @click="scrollChange('help02')" class="help_pc_mustBox-title" > {{$t('help.help101')}}</p>
                    <p  @click="scrollChange('help02')" class="help_pc_mustBox-title" > {{$t('help.help102')}}</p>
                    <p  @click="scrollChange('help02')" class="help_pc_mustBox-title" > {{$t('help.help103')}}</p>
                    <p  @click="scrollChange('help02')" class="help_pc_mustBox-title" > {{$t('help.help104')}}</p>
                    <p  @click="scrollChange('help02')" class="help_pc_mustBox-title" > {{$t('help.help105')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help106')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help107')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help108')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help109')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help110')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help111')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help112')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help113')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help114')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help115')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help116')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help117')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help118')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help119')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help120')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help121')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help122')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help123')}}</p>
                    <p class="help_pc_mustBox-title" > {{$t('help.help124')}}</p> -->
                <p
                  @click="scrollChange(item)"
                  class="help_pc_mustBox-title"
                  v-for="item in 25"
                  :key="item"
                >
                  {{ $t("help.help" + (99 + item)) }}
                </p>
              </div>

              <div class="help_pc_faqBox">
                <p class="help_pc_faqBox-text">
                  <!-- {{$t('help.help100')}} -->
                </p>
              </div>
            </div>
          </div>

          <div v-html="$t('helpBlock.helpBlock')"></div>
        </main>
      </div>
    </div>

    <!-- 移动端 -->
    <div class="user_profile_iphone">
      <!-- <div  v-html="$t('helpBlock.ihponeHelp')"></div> -->
      <div  v-html="$t('helpBlock.ihponeHelp')"> 
      
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "help",
  data() {
    return {
      arrTitle: [
        { title: "1. Must to know before gettting started", id: "#title_a01" },
        {
          title:
            "(1). How to register on Mottwebsite? (Keyword: Registration)",
          id: "#title_a02",
        },
        {
          title:
            "(2). How to apply the product after registration? (Keyword: Application)",
          id: "#title_a03",
        },
        {
          title: "(3). How does it work? (Keyword: Process)",
          id: "#title_a04",
        },
      ],
      arrcentent: [],
      timeNumTen: 10,
      orangeIsShow: false,
      onloadIsShowBloc: false,
      timeIiShow: true,
      helpNum: NaN,
    };
  },
  mounted() {
    var timer1 = setInterval(() => {
      // console.log(this.timeNumTen);
      if (this.timeNumTen > 0) {
        this.timeNumTen--;
        // console.log('s');
      } else {
        this.timeNumTen = 0;
        clearInterval(timer1); //关闭定时器
        // 当定时器关闭时，显示选项区块
        this.onloadIsShowBloc = true;
      }
    }, 1000);
  },
  methods: {
    toPinglun(pathId) {
      this.$refs[pathId].scrollIntoView(true);
      console.log(pathId);
    },
    backHome() {
      this.$router.push("/home");
    },
    continueReading() {
      this.onloadIsShowBloc = false;
      this.timeIiShow = false;
    },

    btnHome() {
      this.$router.push("/home");
    },

    // 跳转到指定位置
    scrollChange(key) {
      // console.log(this.$refs[key])
      // console.log(key - 1)
      this.helpNum = key + 100;
      this.helpNum = "help" + this.helpNum;
      console.log(this.helpNum);
      document.getElementById(this.helpNum).scrollIntoView({
        behavior: "smooth", //设置一个平滑的属性
      });
    },
  },
};
</script>

<style lang = 'scss' >
#helpAllBllack{
@media only screen and (max-width: 900px) {
  .howToOrder {
    padding: 0 1rem;
    color: #595757;
    font-size: 0.75rem;
    line-height: 1.2rem;
  }
  .bold-text {
    color: #ff5900;
    font-weight: 700;
  }
  .active-text {
    color: #ff5900;
  }
  .howToRegister {
    padding: 0 1rem;
    color: #595757;
    font-size: 0.75rem;
    line-height: 1.2rem;
  }
  img {
    width: 100%;
  }
  .bold-active-text[data-v-14fb50ff] {
    color: #ff5900;
    font-weight: 700;
  }
  .txt {
    color: #595757;
    font-size: 0.7rem;
    line-height: 1.2rem;
  }
  .user_profile_pc {
    display: none;
    overflow: hidden;
  }
  .help_pc_left_1cue9 {
    /* padding-bottom: 100px; */
    box-sizing: border-box;
  }
  .help_pc_mainContent-leftBox_2-7uR {
    /* width: 970px; */
    height: 100%;
    /* margin-left: 80px;
    margin-top: 20px;
    margin-bottom: 20px; */
    overflow: scroll;
    background: #fff;
    box-shadow: 0 1px 6px #ccc;
    box-sizing: border-box;
  }
  .imgwrape {
    background: #ccc;
    overflow: hidden;
    margin: 0.5rem 0;
    /* width: 664px; */
    /* height: 274px; */
    height: 100%;
    /* min-height: 274px; */
  }
  .help_centent {
    box-sizing: border-box;
    /* padding: 100px; */
    padding-bottom: env(safe-area-inset-bottom);
    color: #595757;
    font-size: 0.75rem;
    line-height: 1.2rem;
  }
  .help-title {
    padding-top: 0.5rem;
    padding-bottom: 1rem;
    border-bottom: 0.05rem solid orangered;
    font-size: 2rem;
    text-align: left;
    font-weight: 700;
  }
}
@media only screen and (min-width: 900px) {
  .user_profile_iphone {
    display: none;
  }
  html {
    font-size: 30px;
  }
  .help_pc_left_1cue9 {
    padding-bottom: 100px;
    box-sizing: border-box;
  }
  .help_pc_mainContent-leftBox_2-7uR {
    width: 970px;
    height: 100%;
    margin-left: 80px;
    margin-top: 20px;
    margin-bottom: 20px;
    overflow: scroll;
    background: #fff;
    box-shadow: 0 1px 6px #ccc;
    box-sizing: border-box;
  }
  .imgwrape {
    /* background: pink; */
    overflow: hidden;
    margin: 0.5rem 0;
    width: 664px;
    /* height: 274px; */
  }
  .help_centent {
    box-sizing: border-box;
    padding: 100px;
    padding-bottom: env(safe-area-inset-bottom);
    color: #595757;
    font-size: 0.75rem;
    line-height: 1.2rem;
  }
  .help-title {
    padding-bottom: 1rem;
    border-bottom: 0.05rem solid #ccc;
    font-size: 30px;
    text-align: left;
    font-weight: 700;
  }
}

/* pc端 */

/* 跳出的选项卡 */
.van-overlay {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
}
.van-popup {
  position: fixed;
  max-height: 100%;
  overflow-y: auto;
  background-color: #fff;
  -webkit-transition: -webkit-transform 0.3s ease-out;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  -webkit-overflow-scrolling: touch;
}

.van-popup--center {
  border-radius: 0.3rem;
  top: 50%;
  left: 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
  transform: translate3d(-50%, -50%, 0);
}
.dialog {
  background: #fff;
  padding: 1rem;
  text-align: center;
  display: flex;
  flex-direction: row;
  border-radius: none;
  font-size: 16px;
  justify-content: space-between;
}
.dialog-btn {
  color: #fff;
  padding: 0 0.25rem;
  height: 1.9rem;
  line-height: 1.9rem;
  cursor: pointer;
}
.dialog-btn {
  display: inline-block;
  background: #ff5900;
  border-radius: 0.15rem;
  border: none;
}

.colorOrange {
  color: #ff5900;
}
.help {
  width: 100%;
  height: 100%;
}
.help_pc_header {
  height: 50px;
  line-height: 50px;
  box-shadow: 0 2px 3px 0 hsla(0, 0%, 39.2%, 0.15);
  user-select: none;
  min-width: 1280px;
  overflow: hidden;
  border-bottom: 1px solid #fff;
  color: #000;
  white-space: nowrap;
  font-size: 14px;
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, #fdfdfd, #fff);
  z-index: 110;
  text-align: left;
}
.help_pc_header .help_pc_title {
  font-weight: 700;
  margin: 0 20px;
}
.help_pc_header {
  height: 50px;
  line-height: 50px;
  box-shadow: 0 2px 3px 0 hsla(0, 0%, 39.2%, 0.15);
  user-select: none;
  min-width: 1280px;
  overflow: hidden;
  border-bottom: 1px solid #fff;
  color: #000;
  white-space: nowrap;
  font-size: 14px;
  width: 100%;
  position: relative;
  background: linear-gradient(180deg, #fdfdfd, #fff);
  z-index: 110;
}
.help_pc_header .help_pc_icon1 {
  width: 12px;
  height: 12px;
  display: inline-block;
}
.help_pc_header .help_pc_timeTxt {
  font-size: 12px;
  color: #a5a5a5;
}
.help_pc_countdownTxt {
  margin-left: 10px;
  font-size: 16px;
  color: #a5a5a5;
}
.help_pc_mainContent {
  height: 612px;
  background: #f7f7f7;
  overflow: hidden;
  min-width: 1280px;
  display: flex;
	justify-content: center;
}
.help_pc_mainContent-rightBox {
  width: 294px;
  height: 100%;
  /* height: 280px; */
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.help_pc_mainContent-rightBox .help_pc_rightTitle {
  border-bottom: 1px solid #ddd;
  padding-bottom: 8px;
  margin-left: 15px;
  color: #a5a5a5;
  user-select: none;
  font-size: 12px;
  text-align: left;
}
.help_pc_mainContent-rightBox .help_pc_rightWrap {
  flex: 1;
  overflow: scroll;
  padding: 10px 0;
  /* height: 40px; */
  height: 61;
}

.help_pc_mainContent-rightBox .help_pc_mustBox {
  font-size: 13px;
  color: #666;
  cursor: pointer;
  text-align: left;
}
.help_pc_mainContent-rightBox .help_pc_mustBox-text,
.help_pc_mainContent-rightBox .help_pc_mustBox-title {
  line-height: 18px;
  margin-left: 15px;
  padding-left: 10px;
  padding: 6px 0 6px 15px;
  text-align: left;
  font-size: 13px;
}
.help_pc_mainContent-rightBox {
  color: #ff5900;
}
.help_pc_mainContent-rightBox .help_pc_faqBox {
  font-size: 13px;
  cursor: pointer;
  color: #666;
  text-align: left;
}
.help_pc_mainContent-rightBox .help_pc_faqBox-text,
.help_pc_mainContent-rightBox .help_pc_faqBox-title {
  line-height: 18px;
  margin-left: 15px;
  padding-left: 10px;
  padding: 6px 0 6px 15px;
  text-align: left;
  font-size: 13px;
}

.help_pc_mainContent-leftBox_2-7uR {
  padding-bottom: 100px;
  box-sizing: border-box;
}
.help-message {
  margin: 1rem 0;
}
.text {
  text-align: right;
  padding: 0.25rem 1rem;
}
.txt {
  padding: 0 1rem;
  text-align: left;
}
.blacksty {
  color: #333;
  font-weight: 700;
}

.help-content {
  padding: 0 1rem;
  text-align: left;
}
.help-content h1 {
  margin: 1.5rem 0 0.5rem;
  font-size: 0.9rem;
  height: auto;
  color: #333;
  line-height: 1.5rem;
}

.theme-color {
  color: #ff5900;
}
.after-Home {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  background: orange;
  font-size: 16px;
  border-radius: 0.15rem;
  text-decoration: none;
  display: inline-block;
  height: 40px;
  width: 120px;
  color: white;
  line-height: 40px;
}

/* 移动端 */
.mainPage_mb_content_2ozs2 {
  background: #f5f5f5;
  padding-bottom: calc(2.15rem + env(safe-area-inset-bottom));
  padding-bottom: calc(2.15rem + constant(safe-area-inset-bottom));
  -webkit-overflow-scrolling: touch;
}
.accountMenu_mb {
  height: calc(100vh - 4.8rem);
}
.van-cell-group {
  background-color: #fff;
}
.van-hairline--top-bottom {
  position: relative;
}
.cell {
  height: 1.8rem;
}
.van-cell {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  box-sizing: border-box;
  width: 100%;
  padding: 10px 16px;
  overflow: hidden;
  color: #323233;
  font-size: 14px;
  line-height: 24px;
  background-color: #fff;
}
.van-cell__title {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
  flex: 1;
}
.cell_title {
  display: grid;
  grid-template-columns: 1.2rem auto;
  grid-template-rows: calc(1.8rem - 20px);
  grid-template-areas: "left center";
  align-items: center;
}
.cell_left {
  grid-area: left;
  justify-self: center;
}
.cell_center {
  margin-left: 0.175rem;
  grid-area: center;
  text-align: left;
}
.imgwrape img {
  height: 100%;
  width: 100%;
}
}
</style>